.tag-list {
  padding: 1rem 0;

  .tag-swiper {

    > div {
      flex: 1;
    }

    svg {
      width: 0.5rem;
    }

    .return-icon {
      margin-left: 1rem;
      color: var(--text-color-gray);
    }

    .drawer-show-icon {
      margin: 0 1rem 0 0.5rem;
      transform: rotate(90deg);
    }

  }

  .tag {
    font-size: 0.6rem;
    height: 2rem;
    color: var(--text-color-gray);
    border-radius: 2rem;
    transition: 0.3s;
    cursor: pointer;
  }

  .active {
    background-color: var(--gray-20);
    color: var(--text-color);
    font-weight: bold;
  }


}


.tag-list-Drawer {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color-white);

  .tag-list-Drawer-ul {
    flex: 1;
    overflow: auto;
    padding: 1rem 0;

    > li {
      padding: 0 1rem;

      > h5 {
        position: sticky;
        top: -1rem;
        backdrop-filter: blur(5px);
      }

      > ul {
        padding: 0.5rem 0;
        display: grid;
        grid-template-columns:repeat(5, 1fr);
      }
    }

  }

  .tag {
    font-size: 0.6rem;
    height: 2rem;
    color: var(--text-color-gray);
    border-radius: 2rem;
    transition: 0.3s;
    cursor: pointer;
  }

  .active {
    background-color: var(--gray-20);
    color: var(--text-color);
    font-weight: bold;
  }
}
